<template>
  <div class="player">
    <div class="player-header" @click="closeRepeat">
      <div class="header-left">
        <img src="./images/bf.jpg" class="player-img-big" />
        <div class="player-download">下载这首歌</div>
        <a href="#" class="player-a">外部播放此歌曲></a>
      </div>

      <div class="header-right">
        <span class="player-title">我是歌名哈哈哈</span>
        <div class="player-song-info">
          <span class="player-cd">专辑：我是专辑</span>
          <span class="player-singer">歌手：我是歌手</span>
        </div>

        <div class="player-lyric-list">
          <p class="player-lyric">我是歌词哈哈哈哈哈</p>
          <p class="player-lyric">我是歌词哈哈哈哈哈</p>
          <p class="player-lyric">我是歌词哈哈哈哈哈</p>
          <p class="player-lyric">我是歌词哈哈哈哈哈</p>
          <p class="player-lyric">我是歌词哈哈哈哈哈</p>
          <p class="player-lyric">我是歌词哈哈哈哈哈</p>
          <p class="player-lyric">我是歌词哈哈哈哈哈</p>
          <p class="player-lyric">我是歌词哈哈哈哈哈</p>
          <p class="player-lyric">我是歌词哈哈哈哈哈</p>
          <p class="player-lyric">我是歌词哈哈哈哈哈</p>
          <p class="player-lyric">我是歌词哈哈哈哈哈</p>
          <p class="player-lyric">我是歌词哈哈哈哈哈</p>
          <p class="player-lyric">我是歌词哈哈哈哈哈</p>
          <p class="player-lyric">我是歌词哈哈哈哈哈</p>
          <p class="player-lyric">我是歌词哈哈哈哈哈</p>
          <p class="player-lyric">我是歌词哈哈哈哈哈</p>
          <p class="player-lyric">我是歌词哈哈哈哈哈</p>
          <p class="player-lyric">我是歌词哈哈哈哈哈</p>
          <p class="player-lyric">我是歌词哈哈哈哈哈</p>
          <p class="player-lyric">我是歌词哈哈哈哈哈</p>
        </div>
      </div>
    </div>

    <div class="player-footer">
      <div class="footer-left">
        <span class="iconfont icon-shangyishou changer-song"></span>
        <span class="iconfont icon-bofang"></span>
        <span class="iconfont icon-xiayishou changer-song"></span>
      </div>

      <div class="footer-middle">
        <img src="./images/bf.jpg" class="player-img-sm" />
        <div class="player-warp">
          <div class="warp-top">
            <div class="player-title-sm">我是歌名</div>
            <audio autoplay controls :src="url"></audio>
            <!-- <div class="player-time">00:00/00:00</div> -->
          </div>
          <div class="player-bar-warp">
            <div class="player-bar"></div>
            <div class="player-bar-point"></div>
          </div>
        </div>
      </div>
      <div class="footer-right">
        <span class="iconfont icon-laba icon-right"></span>
        <span
          class="iconfont icon-24gl-repeat2 icon-right"
          @click="showRepeat"
        ></span>
        <span class="iconfont icon-download icon-right"></span>
        <span class="iconfont icon-fenxiang icon-right"></span>
        <span class="iconfont icon-liebiao iconmore"> 30</span>
      </div>
    </div>

    <div class="player-repeat" v-if="isShowRepeat">
      <span class="iconfont icon-24gl-repeat2 icon-repeat"> 列表循环</span>
      <span class="iconfont icon-24gl-repeatOnce2 icon-repeat"> 单曲循环</span>
      <span class="iconfont icon-xunhuan icon-repeat"> 随机循环</span>
    </div>
  </div>
</template>
<script>
// 获取url
let url = "https://music.163.com/song/media/outer/url?id=1453957944.mp3";
import store from "@/store";
const time = "03:57";
// url默认
const songsList = store.state.songStore.Data;

export default {
  name: "MusicPlayer",
  data() {
    return {
      isShowRepeat: false,
      time,
      lineWidth: 0,
      songsList,
      currentIndex: 0,
      audio: undefined,
      url,
    };
  },
  methods: {
    showRepeat() {
      this.isShowRepeat = !this.isShowRepeat;
    },
    closeRepeat() {
      this.isShowRepeat = false;
    },
    processingTime(time) {
      let m = Math.floor(time / 1000 / 60);
      let s = Math.ceil((time / 1000) % 60);
      if (m < 10) {
        m = "0" + m;
      }
      if (s < 10) {
        s = "0" + s;
      }
      return m + ":" + s;
    },
    handleReduceIndex() {
      this.currentIndex--;
      if (this.currentIndex < 0) {
        currentIndex.value = songsList.value.length - 1;
      }
    },
    handlePlusIndex() {
      currentIndex.value++;
      if (currentIndex.value > songsList.value.length - 1) {
        currentIndex.value = 0;
      }
    },
    handleJump(e) {
      const currentTime = (e.offsetX / 500) * (time.value / 1000);
      audio.value.currentTime = currentTime;
    },
  },
};
</script>

<style lang="less" scoped>
.player {
  position: relative;
}
.player-header {
  width: 100%;
  height: 413px;
  background: #382a28;
  display: flex;
  justify-content: center;
  position: relative;
}
.header-left {
  width: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20px;
  // border: 1px solid red;
}
.player-img-big {
  width: 150px;
  height: 150px;
  border: 2px solid #fff;
  margin-bottom: 20px;
}
.player-download {
  height: 50px;
  width: 230px;
  margin-bottom: 20px;
  border: 1px solid #d3cfcf;
  color: #d3cfcf;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}
.player-download:hover {
  color: #fff;
  border: 1px solid #fff;
}

audio {
  position: absolute;
  left: 0;
  top: 100;
  width: 360px;
  height: 50px;
}
.player-a {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.header-right {
  // border: 1px solid #fff;
  width: 480px;
  margin-left: 120px;
}
.player-title {
  color: #fff;
  width: 229px;
  height: 36px;
  font-size: 24px;
}
.player-song-info {
  display: flex;
  justify-content: space-between;
  padding-top: 15px;
}
.player-cd {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.5);
}
.player-singer {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.5);
}

.player-lyric-list {
  width: 440px;
  height: 272px;
  // border: 1px solid #fff;
  margin-top: 34px;
  overflow-y: scroll;
}
.player-lyric {
  width: 420px;
  height: 34px;
  font-size: 15px;
  color: #d3cfcf;
}

.player-footer {
  width: 100%;
  height: 80px;
  background: #544a49;
  display: flex;
  justify-content: center;
}
.footer-left {
  // border: 1px solid #fff;
  width: 200px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.icon-bofang {
  font-size: 60px;
  color: #fff;
}
.changer-song {
  font-size: 30px;
  color: #d3cfcf;
}
.changer-song {
  color: #fff;
}
.footer-middle {
  // border: 1px solid #fff;
  width: 440px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.player-warp {
  width: 370px;
  // border: 1px solid #fff;
}
.player-img-sm {
  width: 60px;
  height: 60px;
  border: 1px solid #fff;
  margin-right: 20px;
}
.warp-top {
  position: relative;
  display: flex;
  justify-content: space-between;
}
.player-bar-warp {
  position: relative;
}
.player-bar {
  width: 371px;
  // position: relative;
  height: 1px;
  background-color: #fff;
  margin-top: 10px;
}
.player-bar-point {
  position: absolute;
  left: 0;
  top: -7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #fff;
  transition: 0.5s transform;
}
.player-title-sm {
  width: 270px;
  height: 24px;
  color: #d3cfcf;
  // border: 1px solid #fff;
}
.player-time {
  width: 75px;
  height: 24px;
  color: #d3cfcf;
  // border: 1px solid #fff;
}
.footer-right {
  // border: 1px solid #fff;
  width: 260px;
  height: 80px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.iconmore {
  width: 40px;
  height: 23px;
  background: #353031;
  border-radius: 20px;
  color: #fff;
  padding: 0 15px 0 10px;
}
.iconmore:hover {
  color: #01e5ff;
}
.icon-right {
  color: #d3cfcf;
  font-size: 18px;
}
.icon-right:hover {
  color: #01e5ff;
}

.player-repeat {
  position: absolute;
  width: 100px;
  height: 95px;
  padding: 10px;
  background: #242b33;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  top: 298px;
  left: 858px;
}
.icon-repeat {
  color: #fff;
  font-size: 13px;
  padding: 8px;
}
.icon-repeat:hover {
  color: #01e5ff;
}
</style>
